// pages/isbn/isbn.js

const app = getApp();

import { loginAuthorApi } from '../../api/loginAuthorization';

import { isbnRequest } from '../../utils/request';

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 已输入字符长度
    currentWordNumber: 0,
    // 说明备注
    description: '',
    // 图片显示数组
    imgList: [],
    imgTmpList: [], //图片元信息存储数组
    // 图片压缩
    compression: [],
    //  拖拽图片
    imageWitdh: 0,
    x: 0, // movable-view的坐标
    y: 0,
    areaHeight: 0, // movable-area的高度
    hidden: true, // movable-view是否隐藏
    currentImg: '', // movable-view的图片地址
    currentIndex: 0, // 要改变顺序的图片的下标
    pointsArr: [], // 每张图片的坐标
    flag: true, // 是否是长按
    scrollTop: 0, // 滚动条距离顶部的距离
  },

  // 计算图片宽度
  _handleComputedImage(e) {
    const windowWidth = app.globalData.systemInfo.windowWidth;
    const width = windowWidth - 16;
    const imageWitdh = (width - 16) / 3;
    this.setData({
      imageWitdh: imageWitdh.toFixed(0)
    })
  },

  // 计算movable-area的高度
  _handleComputedArea(e) {
    let that = this;
    wx.createSelectorQuery().selectAll('.image-choose-container').boundingClientRect(function (rect) {
      that.setData({
        areaHeight: rect[0].height
      })
    }).exec()
  },

  // 计算每张图片的坐标
  _handleComputedPoints(e) {
    let that = this;
    var query = wx.createSelectorQuery();
    var nodesRef = query.selectAll(".image-item");
    nodesRef.fields({
      dataset: true,
      rect: true
    }, (result) => {
      that.setData({
        pointsArr: result
      })
    }).exec()
  },

  // 长按图片
  handleLongTap(e) {
    // 计算每张图片的坐标
    this._handleComputedPoints();
    this.setData({
      currentImg: e.currentTarget.dataset.url,
      currentIndex: e.currentTarget.dataset.index,
      hidden: false,
      flag: true,
      x: e.currentTarget.offsetLeft,
      y: e.currentTarget.offsetTop
    })
  },

  // 移动的过程中
  handleTouchMove(e) {
    let x = e.touches[0].pageX;
    let y = e.touches[0].pageY;
    // 首先先获得当前image-choose-container距离顶部的距离
    let that = this;
    wx.createSelectorQuery().selectAll('.image-choose-container').boundingClientRect(function (rect) {
      let top = rect[0].top;
      y = y - that.data.scrollTop - top;
      that.setData({
        x: x,
        y: y,
      })

    }).exec()
  },

  // 移动结束的时候
  handleTouchEnd(e) {
    if (!this.data.flag) {
      // 非长按情况下
      return;
    }
    let x = e.changedTouches[0].pageX;
    let y = e.changedTouches[0].pageY - this.data.scrollTop;
    const pointsArr = this.data.pointsArr;
    let data = this.data.imgList;
    let data2 = this.data.imgTmpList;
    console.log(data, '拖拽改变前图片数组')
    for (var j = 0; j < pointsArr.length; j++) {
      const item = pointsArr[j];
      if (x > item.left && x < item.right && y > item.top && y < item.bottom) {
        const endIndex = item.dataset.index;
        const beginIndex = this.data.currentIndex;
        //临时保存移动的目标数据
        let temp = data[beginIndex];
        let temp2 = data2[beginIndex];
        //将移动目标的下标值替换为被移动目标的下标值
        data[beginIndex] = data[endIndex];
        data2[beginIndex] = data2[endIndex]
        //将被移动目标的下标值替换为beginIndex
        data[endIndex] = temp;
        data2[endIndex] = temp2;
      }
    }
    console.log(data, '拖拽后发生改变后的图片数组')
    this.setData({
      imgList: data,
      imgTmpList: data2,
      hidden: true,
      flag: false,
      currentImg: ''
    })
  },

  // 加号显示操作菜单
  chooseAction() {
    let length = this.data.imgList.length;
    if (length == 9) {
      return wx.showToast({
        title: "亲，最多只能选择九张图哦~",
        icon: "none",
        duration: 2000
      })
    }
    let _this = this;
    wx.showActionSheet({
      itemList: ['扫描书籍条形码'],
      success: function (res) {
        _this.booksIdentifyClick();
      },
      fail: function (res) {
        console.log(res.errMsg)
      }
    })
  },

  //远程图片链接通过getImageInfo转本地链接
  url2img(tempFilePath) {
    return new Promise(function (resolve) {
      //获得原始图片大小
      wx.getImageInfo({
        src: tempFilePath,
        success(res) {
          resolve(res.path);
        },
        fail(err){
          resolve(-1);
          console.log(err);
          wx.showToast({
            icon: 'none',
            title: '图片获取失败，请重试'
          })
        }
      })
    })
  },
  
  // 点击查看原图
  ViewImage(e) {
    wx.previewImage({
      urls: this.data.imgList,
      current: e.currentTarget.dataset.url
    });
  },
  
  // 删除已选
  DelImg(e) {
    wx.showModal({
      title: '提示',
      content: '亲！确定要删除吗？',
      success: res => {
        if (res.confirm) {
          this.data.imgList.splice(e.currentTarget.dataset.index, 1);
          this.data.imgTmpList.splice(e.currentTarget.dataset.index, 1);
          // 更新面积
          this._handleComputedArea();
          this.setData({
            imgList: this.data.imgList,
            imgTmpList: this.data.imgTmpList
          })
        }
      }
    })
  },

  // isbn识别
  booksIdentifyClick() {
    const that = this;
    wx.scanCode({
      scanType: ['barCode'],
      async success(res) {
        const isbnRes = {
          url: loginAuthorApi.isbn(res.result)
        }
        // 开始识别等待
        wx.showLoading({
          mask: true,
          title: '识别中'
        })
        const returnValue = await isbnRequest(isbnRes);
        // 结束等待
        wx.hideLoading();
        if (!returnValue) {
          return wx.showToast({
            icon: 'none',
            title: '没有检测到书籍条形码'
          })
        }
        
        // 添加图片到 + 发布页图片展示区域
        // 远程图片转本地(有图片地址进行后续操作)
        if(returnValue.photoUrl) {
          var url = await that.url2img(returnValue.photoUrl);
          if(url===-1){
            // console.log("扫码失败");
            return;
          }
          that.data.imgList.push(url);
          that.data.imgTmpList.push(url);
        }
        // 拼接识别内容到多行文本框
        let price = '';
        // 不包含元并且不包夜cny的末尾加元
        if(returnValue.price.search('元') === -1 && returnValue.price.search('CNY') === -1) {
          price = returnValue.price + '元';
        }
        // 含义cny的，空格符号分割取数字部分，末尾+元
        else if(returnValue.price.search('CNY') !== -1) {
          price = returnValue.price.split(' ')[1] + '元';
        // 其他符合等等带有元的，都直接赋值
        } else {
          price = returnValue.price;
        }
        that.data.description += returnValue.name + ' 原价' + price + '\n';
        // 修改书籍识别按钮为继续识别和对应文字和图片
        that.setData({
          imgList: that.data.imgList,
          imgTmpList: that.data.imgTmpList,
          description: that.data.description,
          currentWordNumber: that.data.description.length
        })
        //更新面积
        that._handleComputedArea();
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 计算图片
    this._handleComputedImage();
  },

  // 监听滚动
  onPageScroll: function (e) {
    this.setData({
      scrollTop: e.scrollTop
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})